<template>
	<view class="profile-container">
		<!-- 通知图标 -->
		<view class="notification-container">
			<notification-badge></notification-badge>
		</view>
		
		<!-- 用户信息卡片 -->
		<view class="user-card">
			<view class="user-avatar" @tap="editAvatar">
				<image :src="userInfo.avatar || '/static/个人中心.png'" mode="aspectFill" class="avatar-img"></image>
				<view class="avatar-edit-icon">📷</view>
			</view>
			<view class="user-info">
				<text class="user-name">{{ userInfo.nickname || '未设置昵称' }}</text>
				<text class="user-account">账号：{{ userInfo.username || '加载中...' }}</text>
				<text class="user-phone">{{ userInfo.phone || '未绑定手机' }}</text>
				<!-- 实名认证状态 -->
				<view class="verification-status"
					:class="{ 'verified': userInfo.isVerified, 'unverified': !userInfo.isVerified }">
					<text class="verification-icon">{{ userInfo.isVerified ? '✅' : '⚠️' }}</text>
					<text class="verification-text">{{ userInfo.isVerified ? '已实名认证' : '未实名认证' }}</text>
				</view>
			</view>
			<view class="edit-btn" @tap="showEditModal">
				<text class="edit-text">编辑</text>
			</view>
		</view>

		<!-- 实名认证提醒 -->
		<view v-if="!userInfo.isVerified" class="verification-alert">
			<view class="alert-content">
				<text class="alert-icon">🔒</text>
				<view class="alert-text">
					<text class="alert-title">实名认证提醒</text>
					<text class="alert-desc">未实名认证用户无法观看直播，请尽快完成认证</text>
				</view>
				<view class="alert-btn" @tap="showVerificationModal">
					<text class="alert-btn-text">立即认证</text>
				</view>
			</view>
		</view>

		<!-- 功能菜单 -->
		<view class="menu-section">
			<view class="menu-item" @tap="navigateToSettings">
				<text class="menu-icon">⚙️</text>
				<text class="menu-text">设置</text>
				<text class="menu-arrow">></text>
			</view>
			<view class="menu-item" @tap="navigateToSecurity">
				<text class="menu-icon">🛡️</text>
				<text class="menu-text">账号与安全</text>
				<text class="menu-arrow">></text>
			</view>
			<view class="menu-item" @tap="navigateToPassword">
				<text class="menu-icon">🔐</text>
				<text class="menu-text">修改密码</text>
				<text class="menu-arrow">></text>
			</view>
		</view>

		<!-- 退出登录 -->
		<view class="logout-section">
			<button class="logout-btn" @tap="logout">退出登录</button>
		</view>

		<!-- 编辑个人信息模态框 -->
		<view v-if="showEdit" class="modal-overlay" @tap="closeEditModal">
			<view class="modal-content" @tap.stop>
				<view class="modal-header">
					<text class="modal-title">编辑个人信息</text>
					<view class="close-btn" @tap="closeEditModal">×</view>
				</view>
				<view class="modal-body">
					<!-- 头像编辑 -->
					<view class="form-group avatar-group">
						<text class="form-label">头像</text>
						<view class="avatar-edit-section">
							<view class="current-avatar" @tap="chooseAvatar">
								<image :src="editForm.avatar || '/static/个人中心.png'" mode="aspectFill"
									class="edit-avatar-img"></image>
								<view class="avatar-overlay">
									<text class="upload-text">点击上传</text>
								</view>
							</view>
						</view>
					</view>

					<view class="form-group">
						<text class="form-label">昵称</text>
						<input class="form-input" v-model="editForm.nickname" placeholder="请输入昵称" />
					</view>
					<view class="form-group">
						<text class="form-label">年龄</text>
						<input class="form-input" v-model="editForm.age" type="number" placeholder="请输入年龄" />
					</view>
					<view class="form-group">
						<text class="form-label">手机号</text>
						<input class="form-input" v-model="editForm.phone" placeholder="请输入手机号" />
					</view>
					<view class="form-actions">
						<button class="cancel-btn" @tap="closeEditModal">取消</button>
						<button class="save-btn" @tap="saveUserInfo">保存</button>
					</view>
				</view>
			</view>
		</view>

		<!-- 实名认证模态框 -->
		<view v-if="showVerification" class="modal-overlay" @tap="closeVerificationModal">
			<view class="modal-content verification-modal" @tap.stop>
				<view class="modal-header">
					<text class="modal-title">实名认证</text>
					<view class="close-btn" @tap="closeVerificationModal">×</view>
				</view>
				<view class="modal-body">
					<view class="verification-methods">
						<view class="method-item" :class="{ active: verificationMethod === 'id' }"
							@tap="verificationMethod = 'id'">
							<text class="method-icon">🆔</text>
							<text class="method-text">身份证认证</text>
						</view>
						<view class="method-item" :class="{ active: verificationMethod === 'face' }"
							@tap="verificationMethod = 'face'">
							<text class="method-icon">📷</text>
							<text class="method-text">录入人脸</text>
						</view>
					</view>

					<!-- 身份证认证 -->
					<view v-if="verificationMethod === 'id'" class="id-verification">
						<view class="upload-section">
							<text class="section-title">请上传身份证照片</text>

							<!-- 身份证正面（国徽面） -->
							<view class="upload-item">
								<text class="upload-label">身份证正面（国徽面）</text>
								<view class="upload-area" @tap="uploadIdCardFront">
									<image v-if="verificationForm.idCardFront" :src="verificationForm.idCardFront"
										mode="aspectFit" class="preview-img"></image>
									<view v-else class="upload-placeholder">
										<text class="upload-icon">📷</text>
										<text class="upload-text">点击上传</text>
									</view>
								</view>
							</view>

							<!-- 身份证背面 -->
							<view class="upload-item">
								<text class="upload-label">身份证背面</text>
								<view class="upload-area" @tap="uploadIdCardBack">
									<image v-if="verificationForm.idCardBack" :src="verificationForm.idCardBack"
										mode="aspectFit" class="preview-img"></image>
									<view v-else class="upload-placeholder">
										<text class="upload-icon">📷</text>
										<text class="upload-text">点击上传</text>
									</view>
								</view>
							</view>
						</view>
					</view>

					<!-- 人脸录入 -->
					<view v-if="verificationMethod === 'face'" class="face-verification">
						<view class="face-recognition-area">

							<view v-if="!faceRecognitionStarted" class="face-start">
								<text class="face-icon">👤</text>
								<text class="face-title">人脸录入</text>
								<text class="face-desc">请确保光线充足，面部清晰可见</text>
								<button class="start-face-btn" @tap="startFaceRecognition">开始录入人脸</button>
							</view>

							<view v-if="cameraReady && faceRecognitionStarted && !faceRecognitionCompleted">
								<camera ref="camera" class="camera" device-position="front" flash="off"
									@error="cameraError"></camera>
								<view class="capture-btn-container">
									<button class="capture-btn" @tap="captureFace">录入人脸</button>
								</view>
							</view>


							<view v-if="faceRecognitionCompleted" class="face-completed">
								<text class="success-icon">✅</text>
								<text class="success-text">录入人脸成功</text>
								<image v-if="verificationForm.faceImage" :src="verificationForm.faceImage"
									mode="aspectFit" class="face-result"></image>
							</view>
						</view>
					</view>

					<view class="form-actions">
						<button class="cancel-btn" @tap="closeVerificationModal">取消</button>
						<button class="verify-btn" @tap="submitVerification"
							:disabled="!canSubmitVerification">提交认证</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		API_BASE_URL
	} from '../../static/constants'
	import NotificationBadge from '@/components/notification-badge/notification-badge.vue'

	export default {
		components: {
			NotificationBadge
		},
		name: 'Profile',
		data() {
			return {
				userId: '',
				userInfo: {
					id: null,
					nickname: '',
					username: '',
					age: '',
					phone: '',
					avatar: '/static/个人中心.png',
					isVerified: false,
					realNameVerified: 0
				},
				showEdit: false,
				showVerification: false,
				verificationMethod: 'id', // 'id' 或 'face'
				editForm: {
					nickname: '',
					username: '',
					age: '',
					phone: '',
					avatar: ''
				},
				verificationForm: {
					idCardFront: '',
					idCardBack: '',
					faceImage: ''
				},

				// 人脸识别相关
				cameraReady: false,
				isCameraOpen: false,
				faceRecognitionStarted: false,
				faceRecognitionCompleted: false,
			}
		},
		computed: {
			canSubmitVerification() {
				// 修改为需要同时完成身份证认证和人脸录入
				return this.verificationForm.idCardFront && 
				       this.verificationForm.idCardBack && 
				       this.faceRecognitionCompleted && 
				       this.verificationForm.faceImage;
			}
		},
		onLoad() {
			console.log('Profile页面加载');

			// 先检查token再获取用户信息
			const token = uni.getStorageSync('token');
			const userId = uni.getStorageSync('userId');

			console.log('获取到的token:', token);
			console.log('获取到的userId:', userId);

			if (!token) {
				console.error('用户未登录，跳转到登录页');
				uni.showToast({
					title: '请先登录',
					icon: 'none'
				});
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/login/login'
					});
				}, 1500);
				return;
			}

			if (userId) {
				this.findById(userId);
			} else {
				// 如果没有userId，先验证token获取userId
				this.validateToken(token);
				console.log(uni.getStorageSync('userId'))
			}

			// 获取实名认证状态
			const verificationStatus = uni.getStorageSync('verificationStatus');
			if (verificationStatus) {
				this.userInfo.isVerified = verificationStatus;
			}
		},
		methods: {
			// 初始化摄像头
			initCamera() {
				try {
					const ctx = uni.createCameraContext();
					if (ctx) {
						this.cameraReady = true;
					}
				} catch (error) {
					console.error("摄像头初始化失败：", error);
					uni.showToast({
						title: '摄像头初始化失败',
						icon: 'none'
					});
				}
			},
			findById(userId) {
				const that = this;
				console.log('开始获取用户信息, userId:', userId);

				uni.request({
					url: API_BASE_URL + '9001/user/find-by-id',
					method: 'GET',
					data: {
						id: userId
					},
					success(res) {
						console.log('用户信息获取结果:', res.data);
						if (res.data.code === 200 && res.data.data) {
							const userData = res.data.data;
							console.log('原始用户数据:', userData);

							// 更新用户信息，确保正确映射数据库字段
							that.userInfo = {
								id: userData.id,
								nickname: userData.nickname || '未设置昵称',
								username: userData.username ? userData.username.toString() : '未知账号',
								age: userData.age || '',
								phone: userData.phone || '未绑定手机',
								avatar: userData.avatar || '/static/个人中心.png',
								isVerified: userData.realNameVerified === 1,
								realNameVerified: userData.realNameVerified || 0
							};

							console.log('更新后的用户信息:', that.userInfo);

							// 保存到本地存储
							uni.setStorageSync('userInfo', that.userInfo);
						} else {
							console.error('获取用户信息失败:', res.data.message);
							uni.showToast({
								title: '获取用户信息失败',
								icon: 'none'
							});
						}
					},
					fail(err) {
						console.error('获取用户信息请求失败:', err);
						uni.showToast({
							title: '获取用户信息失败',
							icon: 'none'
						});
					}
				})
			},

			validateToken(tokenData) {
				const that = this;

				console.log('🔍 Profile页面验证token:', tokenData);
				
				// 智能提取token字符串
				let tokenString = '';
				if (typeof tokenData === 'string') {
					tokenString = tokenData;
				} else if (typeof tokenData === 'object' && tokenData.token) {
					tokenString = tokenData.token;
				} else {
					console.error('❌ 无效的token格式:', typeof tokenData);
					uni.showToast({ title: 'Token格式错误，请重新登录', icon: 'none' });
					setTimeout(() => {
						uni.reLaunch({ url: '/pages/login/login' });
					}, 1500);
					return;
				}

				// 确保token格式正确
				if (tokenString && !tokenString.startsWith('Bearer ') && !tokenString.startsWith('bearer ')) {
					tokenString = 'Bearer ' + tokenString;
				}

				console.log('✅ 提取到的token字符串:', tokenString.substring(0, 20) + '...');

				uni.request({
					url: API_BASE_URL + '9001/user/validate',
					method: 'GET',
					header: {
						'Authorization': tokenString
					},
					success(res) {
						console.log('Token验证结果:', res.data);
						if (res.data.code === 200 && res.data.data) {
							that.userId = res.data.data;
							uni.setStorageSync('userId', res.data.data);
							// Token验证成功后获取用户信息
							that.findById(res.data.data);
						} else {
							console.error('Token无效:', res.data.message);
							uni.showToast({
								title: 'Token已过期，请重新登录',
								icon: 'none'
							});
							// 清除无效数据
							uni.removeStorageSync('token');
							uni.removeStorageSync('userId');
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/login/login'
								});
							}, 1500);
						}
					},
					fail(err) {
						console.error('Token验证失败:', err);
						uni.showToast({
							title: '网络错误，请检查网络连接',
							icon: 'none'
						});
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/login/login'
							});
						}, 1500);
					}
				})
			},

			navigateTo(path) {
				uni.navigateTo({
					url: path
				})
			},

			// 导航到设置页面
			navigateToSettings() {
				console.log('点击设置按钮');
				uni.navigateTo({
					url: '/pages/settings/settings'
				});
			},

			// 导航到安全页面
			navigateToSecurity() {
				console.log('点击安全按钮');
				uni.navigateTo({
					url: '/pages/security/security'
				});
			},

			// 导航到密码页面
			navigateToPassword() {
				console.log('点击密码按钮');
				uni.navigateTo({
					url: '/pages/password/password'
				});
			},

			logout() {
				uni.showModal({
					title: '确认退出',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							// 清除所有本地存储数据
							uni.clearStorageSync()
							uni.reLaunch({
								url: '/pages/login/login'
							})
						}
					}
				})
			},

			// 编辑头像
			editAvatar() {
				this.chooseAvatar();
			},

			// 选择头像
			chooseAvatar() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						const tempFilePath = res.tempFilePaths[0];

						// 如果在编辑模式，更新编辑表单
						if (this.showEdit) {
							this.editForm.avatar = tempFilePath;
						} else {
							// 直接更新头像
							this.userInfo.avatar = tempFilePath;
							uni.setStorageSync('userInfo', this.userInfo);
							uni.showToast({
								title: '头像更新成功',
								icon: 'success'
							});
						}
					}
				});
			},

			showEditModal() {
				this.editForm = {
					nickname: this.userInfo.nickname || '',
					username: this.userInfo.username || '',
					age: this.userInfo.age || '',
					phone: this.userInfo.phone || '',
					avatar: this.userInfo.avatar || ''
				};
				this.showEdit = true;
			},

			closeEditModal() {
				this.showEdit = false;
			},

			saveUserInfo() {
				if (!this.editForm.nickname.trim()) {
					uni.showToast({
						title: '请填写昵称',
						icon: 'none'
					});
					return;
				}

				uni.showLoading({
					title: '保存中...'
				});

				// 准备更新数据
				const updateData = {
					id: this.userInfo.id,
					nickname: this.editForm.nickname,
					age: this.editForm.age,
					phone: this.editForm.phone,
					avatar: this.editForm.avatar
				};
				console.log(updateData);
				uni.request({
					url: API_BASE_URL + '9001/user/profile/update',
					method: 'POST',
					header: {
						'Content-Type': 'application/json'
					},
					data: updateData,
					success: (res) => {
						uni.hideLoading();
						if (res.data.code === 200) {
							// 更新本地用户信息
							this.userInfo = {
								...this.userInfo,
								nickname: this.editForm.nickname,
								age: this.editForm.age,
								phone: this.editForm.phone,
								avatar: this.editForm.avatar
							};

							uni.setStorageSync('userInfo', this.userInfo);
							uni.showToast({
								title: '保存成功',
								icon: 'success'
							});

							this.closeEditModal();
						} else {
							uni.showToast({
								title: res.data.message || '保存失败',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						uni.hideLoading();
						console.error('保存失败:', err);
						uni.showToast({
							title: '保存失败',
							icon: 'none'
						});
					}
				})
			},

			// 显示实名认证弹窗
			showVerificationModal() {
				this.showVerification = true;
			},

			// 关闭实名认证弹窗
			closeVerificationModal() {
				this.showVerification = false;
				this.verificationMethod = 'id';
				this.verificationForm = {
					idCardFront: '',
					idCardBack: '',
					faceImage: ''
				};

			},

			// 上传身份证正面
			uploadIdCardFront() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						this.verificationForm.idCardFront = res.tempFilePaths[0];
						uni.showToast({
							title: '身份证正面上传成功',
							icon: 'success'
						});
					}
				});
			},

			// 上传身份证背面
			uploadIdCardBack() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						this.verificationForm.idCardBack = res.tempFilePaths[0];
						uni.showToast({
							title: '身份证背面上传成功',
							icon: 'success'
						});
					}
				});
			},

			// 开始人脸识别
			startFaceRecognition() {
				this.faceRecognitionStarted = true;
				this.recognitionStatus = '正在启动摄像头...';
				console.log('正在启动摄像头...');
				this.initCamera();
				this.isCameraOpen = true;
				// 移除模拟人脸识别过程，只显示摄像头画面
			},

			// 拍摄人脸照片
			captureFace() {
				const that = this;
				console.log('开始拍摄人脸照片');

				// 使用摄像头上下文拍摄照片
				const ctx = uni.createCameraContext();
				ctx.takePhoto({
					quality: 'high',
					success: (res) => {
						console.log('拍照成功', res.tempImagePath);
						that.verificationForm.faceImage = res.tempImagePath;
						this.uploadFace();

					},
					fail: (err) => {
						console.error('拍照失败', err);
						uni.showToast({
							title: '拍照失败，请重试',
							icon: 'none'
						});
					}
				});
			},
			//提交人脸
			uploadFace() {
				const that = this;
				uni.uploadFile({
					url: API_BASE_URL + '8000/api/add-face',
					filePath: this.verificationForm.faceImage,
					name: 'image',
					formData: {
						'userId': uni.getStorageSync('userId')
					},
					success: (res) => {
						console.log(res.data);
      
						let result = JSON.parse(res.data);
						if (result.code === 200) {
							console.log(result.code);
							that.faceRecognitionCompleted = true;
							that.isCameraOpen = false;
							that.recognitionStatus = '录入人脸成功';
							uni.showToast({
								title: '人脸录入成功',
								icon: 'success'
							});
						} else {
							uni.showToast({
								title: '人脸录入失败',
								icon: 'error'
							});
						}
					},
					fail() {
						console.log('录入人脸失败')
					}
				})
			},
			// 提交实名认证
			submitVerification() {
				const that = this;
				// 检查是否同时完成身份证认证和人脸录入
				if (!this.canSubmitVerification) {
					uni.showToast({
						title: '请完成身份证认证和人脸录入',
						icon: 'none'
					});
					return;
				}

				uni.showLoading({
					title: '提交认证中...'
				});
				
				// 模拟实名认证API调用
				setTimeout(() => {
					uni.hideLoading();
					uni.showToast({
						title: '认证申请已提交，请等待审核',
						icon: 'success'
					});

					uni.uploadFile({
						url: API_BASE_URL + '8001/personal/updateRealName',
						filePath: this.verificationForm.idCardFront,
						name: 'file',
						formData: {
							'userId': uni.getStorageSync('userId')
						},
						success(res) {
							let result = JSON.parse(res.data);
							if (result.code === 200) {
								uni.showToast({
									title: '认证成功！',
									icon: 'success'
								});
								// 更新认证状态
								that.userInfo.isVerified = true;
								uni.setStorageSync('verificationStatus', true);
								uni.setStorageSync('userInfo', that.userInfo);

								that.closeVerificationModal();
							}
						}
					})
				}, 2000);
			}
		}
	}
</script>

<style>
	.profile-container {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding: 20rpx;
		position: relative;
	}
	
	.notification-container {
		position: absolute;
		top: 200px;
		right: 2rpx;
		z-index: 10;
		position: fixed;
	}

	.user-card {
		background: #ffffff;
		border-radius: 16rpx;
		padding: 40rpx;
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	.user-avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		margin-right: 30rpx;
		position: relative;
	}

	.avatar-img {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.avatar-edit-icon {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 36rpx;
		height: 36rpx;
		background: #1976D2;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20rpx;
		border: 4rpx solid #fff;
	}

	.user-info {
		flex: 1;
	}

	.user-name {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 10rpx;
	}

	.user-account {
		font-size: 28rpx;
		color: #666;
		display: block;
		margin-bottom: 8rpx;
	}

	.user-phone {
		font-size: 24rpx;
		color: #999;
		display: block;
		margin-bottom: 15rpx;
	}

	.verification-status {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.verification-icon {
		font-size: 24rpx;
	}

	.verification-text {
		font-size: 24rpx;
		color: #666;
	}

	.verified .verification-text {
		color: #4CAF50;
	}

	.unverified .verification-text {
		color: #FF9800;
	}

	.edit-btn {
		background: #1976D2;
		color: #fff;
		padding: 16rpx 32rpx;
		border-radius: 40rpx;
		text-align: center;
	}

	.edit-text {
		color: #fff;
		font-size: 24rpx;
	}

	.verification-alert {
		background: linear-gradient(135deg, #FF6B6B, #FF8E53);
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		color: #fff;
	}

	.alert-content {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.alert-icon {
		font-size: 48rpx;
	}

	.alert-text {
		flex: 1;
	}

	.alert-title {
		font-size: 32rpx;
		font-weight: bold;
		display: block;
		margin-bottom: 8rpx;
	}

	.alert-desc {
		font-size: 24rpx;
		opacity: 0.9;
		display: block;
	}

	.alert-btn {
		background: rgba(255, 255, 255, 0.2);
		padding: 16rpx 24rpx;
		border-radius: 40rpx;
		border: 2rpx solid rgba(255, 255, 255, 0.3);
	}

	.alert-btn-text {
		color: #fff;
		font-size: 24rpx;
	}

	.menu-section {
		background: #ffffff;
		border-radius: 16rpx;
		margin-bottom: 30rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	.menu-item {
		display: flex;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.menu-item:last-child {
		border-bottom: none;
	}

	.menu-icon {
		font-size: 36rpx;
		margin-right: 24rpx;
	}

	.menu-text {
		flex: 1;
		font-size: 30rpx;
		color: #333;
	}

	.menu-arrow {
		font-size: 24rpx;
		color: #999;
	}

	.logout-section {
		text-align: center;
	}

	.logout-btn {
		background: #FF4757;
		color: #fff;
		border: none;
		border-radius: 12rpx;
		padding: 24rpx 60rpx;
		font-size: 30rpx;
		width: 100%;
	}

	/* 模态框样式 */
	.modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;
	}

	.modal-content {
		background: #fff;
		border-radius: 20rpx;
		width: 90%;
		max-width: 600rpx;
		max-height: 80vh;
		overflow: hidden;
	}

	.verification-modal {
		max-width: 700rpx;
	}

	.modal-header {
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.modal-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.close-btn {
		font-size: 48rpx;
		color: #999;
		cursor: pointer;
	}

	.modal-body {
		padding: 30rpx;
		max-height: 60vh;
		overflow-y: auto;
	}

	.form-group {
		margin-bottom: 30rpx;
	}

	.form-label {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
		margin-bottom: 15rpx;
		display: block;
	}

	.form-input {
		width: 100%;
		height: 80rpx;
		border: 1rpx solid #ddd;
		border-radius: 12rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		background: #f8f9fa;
	}

	/* 头像编辑样式 */
	.avatar-group {
		text-align: center;
	}

	.avatar-edit-section {
		display: flex;
		justify-content: center;
	}

	.current-avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		position: relative;
		overflow: hidden;
		border: 2rpx solid #ddd;
	}

	.edit-avatar-img {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.avatar-overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		opacity: 0;
		transition: opacity 0.3s;
	}

	.current-avatar:active .avatar-overlay {
		opacity: 1;
	}

	.upload-text {
		color: #fff;
		font-size: 20rpx;
	}

	.form-actions {
		display: flex;
		gap: 20rpx;
		margin-top: 40rpx;
	}

	.cancel-btn,
	.save-btn,
	.verify-btn {
		flex: 1;
		height: 80rpx;
		border-radius: 12rpx;
		font-size: 28rpx;
		border: none;
	}

	.cancel-btn {
		background: #f5f5f5;
		color: #666;
	}

	.save-btn,
	.verify-btn {
		background: #1976D2;
		color: #fff;
	}

	.verify-btn:disabled {
		background: #ccc;
		color: #999;
	}

	/* 实名认证样式 */
	.verification-methods {
		display: flex;
		gap: 20rpx;
		margin-bottom: 30rpx;
	}

	.method-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 30rpx;
		border: 2rpx solid #e0e0e0;
		border-radius: 12rpx;
		transition: all 0.3s ease;
	}

	.method-item.active {
		border-color: #1976D2;
		background: rgba(25, 118, 210, 0.1);
	}

	.method-icon {
		font-size: 48rpx;
		margin-bottom: 10rpx;
	}

	.method-text {
		font-size: 24rpx;
		color: #666;
	}

	.method-item.active .method-text {
		color: #1976D2;
	}

	/* 身份证上传样式 */
	.upload-section {
		margin-bottom: 30rpx;
	}

	.section-title {
		font-size: 30rpx;
		color: #333;
		font-weight: bold;
		margin-bottom: 20rpx;
		text-align: center;
	}

	.upload-item {
		margin-bottom: 25rpx;
	}

	.upload-label {
		font-size: 24rpx;
		color: #666;
		display: block;
		margin-bottom: 10rpx;
	}

	.upload-area {
		width: 100%;
		height: 200rpx;
		border: 2rpx dashed #ddd;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #fafafa;
		transition: all 0.3s;
	}

	.upload-area:active {
		border-color: #1976D2;
		background: rgba(25, 118, 210, 0.05);
	}

	.upload-placeholder {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10rpx;
	}

	.upload-icon {
		font-size: 48rpx;
		color: #999;
	}

	.upload-text {
		font-size: 24rpx;
		color: #999;
	}

	.preview-img {
		width: 100%;
		height: 100%;
		border-radius: 8rpx;
	}

	/* 人脸识别样式 */
	.face-recognition-area {
		text-align: center;
		min-height: 400rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.face-start {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20rpx;
	}

	.face-icon {
		font-size: 80rpx;
		color: #1976D2;
	}

	.face-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.face-desc {
		font-size: 24rpx;
		color: #666;
		text-align: center;
		line-height: 1.5;
	}

	.start-face-btn {
		background: #1976D2;
		color: #fff;
		border: none;
		border-radius: 12rpx;
		padding: 20rpx 40rpx;
		font-size: 28rpx;
	}

	.face-recognizing {
		width: 100%;
	}

	.face-camera-area {
		width: 300rpx;
		height: 300rpx;
		margin: 0 auto;
		position: relative;
		border-radius: 50%;
		background: #f0f0f0;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 30rpx;
	}

	.face-outline {
		width: 250rpx;
		height: 250rpx;
		border: 4rpx solid #1976D2;
		border-radius: 50%;
		border-top-color: transparent;
		animation: spin 2s linear infinite;
	}

	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.recognition-text {
		position: absolute;
		bottom: -50rpx;
		left: 50%;
		transform: translateX(-50%);
		font-size: 24rpx;
		color: #333;
		white-space: nowrap;
	}

	.recognition-progress {
		margin-top: 30rpx;
	}

	.progress-text {
		font-size: 24rpx;
		color: #666;
		display: block;
		margin-bottom: 10rpx;
	}

	.progress-bar {
		width: 100%;
		height: 8rpx;
		background: #e0e0e0;
		border-radius: 4rpx;
		overflow: hidden;
	}

	.progress-fill {
		height: 100%;
		background: #1976D2;
		border-radius: 4rpx;
		transition: width 0.3s ease;
	}

	.camera {
		width: 100%;
		height: 400rpx;
	}

	.capture-btn-container {
		display: flex;
		justify-content: center;
		padding: 20rpx;
	}

	.capture-btn {
		background: #1976D2;
		color: #fff;
		border: none;
		border-radius: 12rpx;
		padding: 20rpx 40rpx;
		font-size: 28rpx;
	}

	.face-completed {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20rpx;
	}

	.success-icon {
		font-size: 80rpx;
	}

	.success-text {
		font-size: 32rpx;
		color: #4CAF50;
		font-weight: bold;
	}

	.face-result {
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
		border: 4rpx solid #4CAF50;
	}
</style>